<template>
  <div
    class="container-fluid position-relative"
    :style="{ marginBottom: 0, maxWidth: '1200px', paddingTop: '32px' }"
  >
    <div class="col-a1 row">
      <div class="col-lg-6">
        <div class="my-home-div" :style="{ padding: 0 }">
          <div class="my-home-div-line">
            <div>
              <i class="icon icon-ic_fluent_flag_16_filled"></i> 比赛信息
            </div>
          </div>
          <div
            :style="{
              minHeight: '343px',
              paddingBottom: '24px',
              padding: '12px',
            }"
          >
            <div>
              <div
                :style="{
                  border: '1px solid rgba(0, 0, 0, 0.06)',
                  boxShadow:
                    '0px 0.3px 0.9px rgba(0, 0, 0, 0.05), 0px 1.6px 3.6px rgba(0, 0, 0, 0.06)',
                  padding: '12px 12px 0 12px',
                  backgroundColor: '#F5F5F5',
                  borderRadius: '8px',
                  overflow: 'hidden',
                }"
              >
                <div
                  :style="{
                    fontSize: '16px',
                    color: '#222222',
                    marginBottom: '12px',
                  }"
                >
                  {{ aticleid.name }}
                </div>
                <div class="text-right" :style="{ marginBottom: '12px' }">
                  <div class="times">
                    <span
                      v-show="jianchatime(aticleid).text2 === '比赛中'"
                      :style="{ paddingLeft: '24px', paddingRight: '24px' }"
                    >
                      距离比赛{{ n }}还有
                      <span>{{ time.d }}</span>
                      天
                      <span>{{ time.h }}</span>
                      时
                      <span>{{ time.m }}</span>
                      分
                      <span>{{ time.s }}</span>
                      秒
                    </span>
                    <span
                      class="btn-type"
                      :class="jianchatime(aticleid).type"
                      >{{ jianchatime(aticleid).text2 }}</span
                    >
                  </div>
                </div>
                <div
                  :style="{
                    background:
                      'linear-gradient(0deg, rgba(250, 250, 250, 0.5), rgba(250, 250, 250, 0.5)), #FFFFFF',
                    borderTop: '1px solid rgba(0, 0, 0, 0.06)',
                    borderBottom: '1px solid rgba(0, 0, 0, 0.06)',
                  }"
                  class="row"
                >
                  <div
                    class="col"
                    :style="{
                      borderRight: '1px solid rgba(0, 0, 0, 0.06)',
                      padding: '24px 12px',
                    }"
                  >
                    <!-- <div v-show="aticleid.type === 'public'" :style="{ marginBottom: '24px' }">
                      报名时间：
                      <span>{{ TimeYH(aticleid.signupstarttime) }}</span>
                      <span>至</span>
                      <span>{{ TimeYH(aticleid.signupendtime) }}</span>
                    </div> -->
                    <div :style="{ marginBottom: '24px' }">
                      比赛时间：
                      <span>{{ TimeYH(aticleid.activitystarttime) }}</span>
                      <span>至 </span>
                      <span>{{ TimeYH(aticleid.activityendtime) }}</span>
                    </div>
                    <div :style="{ marginBottom: '24px' }">
                      比赛类型：
                      <span>{{
                        aticleid.type === "public" ? "公开" : "非公开"
                      }}</span>
                    </div>
                    <div :style="{ marginBottom: '24px' }">
                      计时方式：
                      <span>{{
                        aticleid.duration ? "个人计时" : "统一计时"
                      }}</span>
                    </div>
                    <div :style="{ marginBottom: '24px' }">
                      比赛时长：
                      <span>
                        {{
                          aticleid.duration
                            ? `${(aticleid.duration / 60).toFixed(1)}小时`
                            : time2(
                                aticleid.activitystarttime,
                                aticleid.activityendtime
                              )
                        }}
                      </span>
                    </div>
                    <div
                      :style="{
                        marginBottom: '24px',
                      }"
                      v-show="aticleid.integral"
                    >
                      比赛积分：
                      <span>{{ aticleid.integral }}</span>
                    </div>
                  </div>
                  <div
                    :style="{
                      width: '185px',
                      padding: '24px 12px',
                    }"
                    v-if="aticleid?.customerservice?.qrcode"
                  >
                    <div :style="{ marginBottom: '12px' }">
                      如有问题请联系老师：
                    </div>
                    <!-- <div :style="{ marginBottom: '12px' }">
                      微信：
                    </div> -->
                    <div :style="{ marginBottom: '12px' }" class="text-center">
                      <img
                        :src="aticleid?.customerservice?.qrcode"
                        width="120"
                        alt=""
                      />
                    </div>
                  </div>
                </div>
                <div
                  :style="{
                    background: '#FFFFFF',
                    height: '44px',
                    lineHeight: '44px',
                  }"
                  class="row cu"
                >
                  <div class="text-center">
                    <span v-if="jianchatime(aticleid).text2 === '未开始'">
                    </span>
                    <div
                      v-else-if="find === '报名比赛'"
                      @click="change"
                      :style="{
                        marginRight: '48px',
                        color: 'var(--color-cheng)',
                        fontWeight: 700,
                        fontSize: '16px',
                      }"
                    >
                      {{ find }}
                      <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon_baomingbisai"></use>
                      </svg>
                    </div>
                    <router-link
                      v-else
                      custom
                      v-slot="{ href }"
                      :to="{ name: '比赛', params: { ID } }"
                    >
                      <el-link
                        :underline="false"
                        :href="href"
                        target="_blank"
                        :style="{ fontWeight: 700, fontSize: '16px' }"
                      >
                        <span>
                          {{
                            new Date(
                              String(aticleid.activityendtime)
                            ).getTime() < datenow
                              ? "查看我的成绩"
                              : "进入比赛"
                          }}
                          <i
                            class="icon icon-ic_fluent_arrow_circle_right_24_filled"
                            :style="{ color: 'var(--color-cheng)' }"
                          ></i>
                        </span>
                      </el-link>
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
            <div :style="{ marginTop: '24px' }" v-if="isin">
              <el-button class="but1" v-if="isranking">
                <router-link
                  tag="div"
                  target="_blank"
                  :to="{ name: '比赛数据详情', params: { ID } }"
                >
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_chengjipaihang1"></use>
                  </svg>
                  比赛数据详情
                </router-link>
              </el-button>
              <el-button
                class="but1"
                v-if="isshowset"
                @click="dialogVisible = true"
              >
                <span tag="div" target="_blank">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_cansairenyuanpeizhi"></use>
                  </svg>
                  参赛成员配置</span
                >
              </el-button>
              <el-button class="but1" v-if="isactivityendtime">
                <a
                  target="_blank"
                  :href="`/question.html?activityid=${ID}&title=${aticleid.name}`"
                >
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon_dayinbisaitimu"></use>
                  </svg>
                  打印比赛题目</a
                >
              </el-button>
              <el-button
                class="but1"
                v-if="isactivitystarttime && aticleid.file"
              >
                <a target="_blank" :href="aticleid.file">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-el-custom-download"></use>
                  </svg>
                  下发文件下载</a
                >
              </el-button>
            </div>
          </div>
        </div>
        <div
          class="my-home-div"
          :style="{ padding: 0 }"
          v-if="!aticleid.isapplication"
        >
          <div class="my-home-div-line">
            <div>
              <el-icon>
                <Comment />
              </el-icon>
              比赛评论
            </div>
          </div>
          <Discuss
            :ID="ID"
            :user="getuser"
            :activity="aticleid"
            :activityusers="activityusers"
          ></Discuss>
        </div>
      </div>

      <div class="col-lg-6">
        <div
          class="my-home-div"
          v-if="isactivityendtime"
          :style="{
            marginRight: '0px',
            marginLeft: 'auto',
            padding: 0,
            overflow: 'auto',
          }"
        >
          <div :style="{ minHeight: '10px', paddingBottom: '24px' }">
            <div class="my-home-div-line">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_bisaigonggaoban"></use>
                </svg>
                赛后公布
              </div>
            </div>
            <div :style="{ padding: '18px' }">
              <el-button
                v-if="!aticleid.isshowactivityquestionbank"
                size="default"
                class="position-relative"
              >
                <a
                  target="_blank"
                  class="stretched-link"
                  :href="`#/activityquestion/${ID}`"
                >
                  查看比赛题单
                </a>
              </el-button>
              <!-- <el-button size="default" @click="_downloadmatchquestion" v-loding="loading">
                下载比赛题单
              </el-button> -->
            </div>
          </div>
        </div>
        <div
          class="my-home-div"
          :style="{
            marginRight: '0px',
            marginLeft: 'auto',
            padding: 0,
            height: '100%',
            overflow: 'auto',
          }"
        >
          <div :style="{ minHeight: '343px', paddingBottom: '24px' }">
            <div class="my-home-div-line">
              <div>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_bisaigonggaoban"></use>
                </svg>
                比赛公告板
              </div>
            </div>
            <div :style="{ padding: '18px' }">
              <div
                v-if="aticleid.isinvitation ? tag : true"
                class="editor-content-view"
                v-html="aticleid.context"
              ></div>
              <div v-else>报名比赛可见</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="参赛成员配置" width="30%">
      <el-form label-position="top">
        <el-form-item label="团队外允许参赛的人员：">
          <div class="row m-0">
            <div class="col p-0">
              <el-input maxlength="11" v-model="phonenum"></el-input>
            </div>
            <div :style="{ width: '100px', textAlign: 'right' }">
              <el-button @click="addclickphone">添加</el-button>
            </div>
          </div>
        </el-form-item>
        <div
          :style="{
            background: '#F5F5F5',
            marginTop: '24px',
            marginBottom: '12px',
            padding: '14px',
          }"
        >
          <div class="row">
            <div class="col">&nbsp;手机号</div>
            <div class="col text-right">删除&nbsp;</div>
          </div>
          <div
            v-for="(v, k) in phonenums"
            class="row"
            :style="{
              background: '#fff',
              borderRadius: '2px',
              marginTop: '12px',
              marginBottom: '12px',
              height: '36px',
              paddingTop: '6px',
            }"
          >
            <div class="col">&nbsp; {{ v.phonenum }}</div>
            <div class="col text-right">
              <span
                class="cu"
                :style="{
                  width: '24px',
                  height: '24px',
                  background: 'var(--color-43)',
                  borderRadius: '2px',
                  display: 'inline-block',
                  lineHeight: '24px',
                  textAlign: 'center',
                }"
                @click="delphonenum(v, k)"
              >
                <el-icon color="#ffffff" size="18px">
                  <semi-select />
                </el-icon>
              </span>
              &nbsp;
            </div>
          </div>
        </div>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" title="请输入报名邀请码" width="260px">
      <div
        class="dialog-invitation text-center"
        v-if="aticleid?.info?.customerservice"
      >
        <span>扫描添加老师获取邀请码</span>
      </div>
      <div class="text-center mb-3" v-if="aticleid?.info?.customerservice">
        <img :src="aticleid?.info?.customerservice" width="120" alt="" />
      </div>
      <el-input v-model="invitationvalue"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="invitation"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Comment, SemiSelect } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, dayjs } from "element-plus";
import {
  computed,
  inject,
  onActivated,
  onBeforeUnmount,
  onDeactivated,
  onMounted,
  reactive,
  ref,
} from "vue";
import { useStore } from "vuex";
import {
  asyncchangeactivityuser,
  asynccreatedactivityuser,
  asyncgetactivity,
  asyncgetactivityuser,
  asyncteamdelactivityuser,
  asyncteamselectactivityuser,
} from "../../../api";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { JCTime, dhms, jianchatime } from "@/util/jianchatime";
import { TimeYH } from "../../../util/time";
import { downloadmatchquestion } from "../../../util/updateoss";
import Discuss from "./discuss.vue";
const loading = ref(false);
async function _downloadmatchquestion() {
  loading.value = true;
  await downloadmatchquestion({ data: aticleid });
  loading.value = false;
}
const props = defineProps<{ ID?: number }>();
const aticleid = reactive<Studycodemodel.Iactivity>({});
const loginfunction = inject<(key: string) => void>("headnavdialogVisible");
const dialogVisible2 = ref(false);

const time = reactive<JCTime>({
  isok: false,
  d: 0,
  h: 0,
  s: 0,
  m: 0,
});
const timer = ref(0);
const n = ref("结束");
const store = useStore(Storekey);

const dialogVisible = ref(false);
const getuser = computed(() => {
  return store.state.user;
});
function time2(a?: Date | string, b?: Date | string) {
  const t = dayjs(b).toDate().getTime() - dayjs(a).toDate().getTime();
  let n: string | number = (t / 60 / 60 / 1000).toFixed(1);
  if (Number(n) === Math.floor(Number(n))) {
    n = Math.floor(Number(n));
  }
  return n + "小时";
}

const phonenum = ref("");
const phonenums = ref<Studycodemodel.Iuser[]>([]);

function addclickphone() {
  if (phonenum.value) {
    phonenums.value.push({ phonenum: phonenum.value });
  }
  phonenum.value = "";
}

async function delphonenum(v: Studycodemodel.Iuser, k: number) {
  if (v.ID) {
    const a = activityusers.value.find((e) => e.userid === v.ID);
    ElMessageBox.confirm("确定要取消此报名用户, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then((e) => {
        asyncteamdelactivityuser({
          teamid: Number(aticleid.teamid),
          activityid: Number(aticleid.ID),
          ID: Number(a?.ID),
        })
          .then((e) => {
            const x = phonenums.value.findIndex(
              (z) => z.phonenum === v.phonenum
            );
            phonenums.value.splice(x, 1);
          })
          .catch((f) => {});
      })
      .catch((e) => {});
  } else {
    phonenums.value.splice(k, 1);
  }
}

async function submit() {
  if (aticleid.teamid && aticleid.ID && phonenums.value.length) {
    const z = await asynccreatedactivityuser({
      teamid: aticleid.teamid,
      phonenums: phonenums.value.map((e) => e.phonenum || ""),
      activityid: aticleid.ID,
    });
    phonenums.value = [];
    ElMessage.success(`添加成功${z}人`);
    getactivityuser();
  }
  dialogVisible.value = false;
}

const activityusers = ref<Studycodemodel.Iactivityuser[]>([]);

const getteam = computed(() => {
  return store.state.team?.rows || [];
});

const isin = computed(() => {
  const t = !!aticleid.activityuser?.find(
    (t) => t.userid === getuser.value?.ID
  );
  if (!t) {
    if (aticleid.teamid) {
      const n1 = getteam.value?.find(
        (e) => e.ID === aticleid.teamid && e.userid === getuser.value?.ID
      );
      if (!n1) {
        const b = getteam.value?.find((e) => e.ID === aticleid.teamid);
        if (!b) return false;
        return !!b.teamuser?.find((f) => f.userid === getuser.value?.ID);
      } else {
        return true;
      }
    }
  }
  return t;
});

/**
 * 是否显示比赛排行
 */
const isranking = computed(() => {
  // return aticleid.isrank || isshowset.value
  return aticleid.isranking || isshowset.value;
});

const datenow = computed(() => {
  return store.state.time!;
});
/**
 * 是否比赛开始
 */
const isactivitystarttime = computed(() => {
  if (aticleid.activitystarttime) {
    return new Date(aticleid.activitystarttime).getTime() < datenow.value;
  }
  return false;
});

/**
 * 是否比赛结束
 */
const isactivityendtime = computed(() => {
  if (aticleid.activityendtime) {
    return new Date(aticleid.activityendtime).getTime() < datenow.value;
  }
  return false;
});

/**
 * 是否管理员
 */
const isshowset = computed(() => {
  if (!aticleid.teamid) return false;
  const n = getteam.value
    ?.filter((e) => e.ID === aticleid.teamid)
    .find((e) => {
      const { userid, teamuser = [] } = e;
      if (userid === getuser.value?.ID) {
        return true;
      }
      return teamuser.find(
        (f) => f.userid === getuser.value?.ID && [1, 2].includes(f.isAdmin || 0)
      );
    });
  return !!n;
});

const find = computed(() => {
  if (!getuser.value) return "报名比赛";
  if (jianchatime(aticleid).text2 === "已结束") {
    return "报名结束";
  }
  const { ID } = getuser.value;
  let name = "";
  const x = aticleid?.activityuser?.find((v) => v.userid == ID);
  if (!x) {
    name = "报名比赛";
  }
  if (name === "报名比赛") {
    if (aticleid.teamid) {
      const team = store.state.team?.rows.find((e) => e.ID === aticleid.teamid);
      if (!team) {
        return "报名比赛";
      } else {
        return "已经报名";
      }
    }
  }
  return name ? name : "已经报名";
});

async function getactivityuser() {
  try {
    const { rows } = await asyncteamselectactivityuser({
      activityid: props.ID,
      teamid: aticleid.teamid ? aticleid.teamid : getteam.value[0]?.ID,
    });
    activityusers.value = rows;
    phonenums.value = rows.map((e) => e.user || {});
  } catch (e) {}
}

async function start() {
  if (typeof props.ID === "number") {
    try {
      const aticle = await asyncgetactivity({ ID: props.ID });
      Object.assign(aticleid, aticle);

      try {
        const activityuser = await asyncgetactivityuser({
          activityid: props.ID,
        });
        Object.assign(aticleid, {
          activityuser: [activityuser],
        });
      } catch (e) {
        Object.assign(aticleid, {
          activityuser: [],
        });
      }
      await getactivityuser();
    } catch (e: any) {
      ElMessage.error(e);
    }
  }
}

async function change() {
  if (!getuser.value && loginfunction) {
    loginfunction("登录");
    return;
  }
  if (aticleid.type !== "public") {
    ElMessage.error("此比赛不是公开比赛，禁止报名");
    return;
  }
  if (jianchatime(aticleid).text2 === "已结束") {
    ElMessage.error("已结束,无法报名");
    return;
  }
  if (aticleid.invitation) {
    const _myteam = localStorage.getItem(`${getuser.value?.ID}-${aticleid.ID}`);
    let b = false;
    if (_myteam) {
      b = aticleid.invitation.split(",").includes(_myteam);
    }
    if (!b) {
      dialogVisible2.value = true;
      return;
    }
  }

  try {
    await asyncchangeactivityuser({
      activityid: props.ID,
    });
    start().then((e) => {
      const n = aticleid.activityuser?.find(
        (e) => e.userid === store.state.user?.ID
      );
      if (n) {
        ElMessage.success("报名成功");
      } else {
        ElMessage.success("取消报名");
      }
    });
  } catch (e: any) {
    ElMessage.error(e);
  }
}

const tag = computed(() => {
  const n = aticleid.activityuser?.find(
    (e) => e.userid === store.state.user?.ID
  );
  if (n) {
    return true;
  }
  const k = activityusers.value.find((e) => {
    return getuser.value?.ID === e.userid;
  });
  if (k) {
    return true;
  }
  const e = getuser.value?.teamuser?.find((e) => {
    return e.teamid === aticleid.teamid;
  });
  if (e) {
    return true;
  } else {
    return false;
  }
});

const invitationvalue = ref<string>();

function invitation() {
  if (invitationvalue.value) {
    const t = aticleid.invitation?.split(",").includes(invitationvalue.value);
    if (t) {
      localStorage.setItem(
        `${getuser.value?.ID}-${aticleid.ID}`,
        invitationvalue.value
      );
      dialogVisible2.value = false;
      change();
      return;
    }
  }
  ElMessage.error("邀请码输入错误");
  return;
}

onMounted(() => {
  start().then((_e) => {
    timer.value = window.setInterval(() => {
      const s = new Date(aticleid.activitystarttime || new Date());
      const e = new Date(aticleid.activityendtime || new Date());
      let t;
      if (s.getTime() > datenow.value) {
        n.value = "开始";
        t = s;
      } else {
        n.value = "结束";
        t = e;
      }
      const time1 = dhms(t, datenow.value);
      Object.assign(time, time1);
    }, 1000);
  });
});

onActivated(() => {
  start().then((_e) => {
    timer.value = window.setInterval(() => {
      const s = new Date(aticleid.activitystarttime || new Date());
      const e = new Date(aticleid.activityendtime || new Date());
      let t;
      if (s.getTime() > datenow.value) {
        n.value = "开始";
        t = s;
      } else {
        n.value = "结束";
        t = e;
      }
      const time1 = dhms(t, datenow.value);
      Object.assign(time, time1);
    }, 1000);
  });
});

onDeactivated(() => {
  clearInterval(timer.value);
});

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
</script>

<style scoped>
.text-x {
  font-size: 18px;
  font-style: normal;
  line-height: 28px;
  margin-top: 24px;
  margin-bottom: 36px;
}

/* .col-a1 {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'div1 div3'
    'div2 div3'

} */

.div3 {
  height: 1030px;
}

.col-a1 h4 {
  margin-bottom: 24px;
  color: var(--color-1f);
  font-weight: bold;
  font-size: 32px;
}

.indexcore {
  box-shadow: 0px 10px 20px 0px rgba(136, 136, 136, 0.3);
  border-radius: 2px;
}

.col-a2 {
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  width: 900px;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.16);
  margin: 0 auto;
}

.col-a3 {
  padding: 48px;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px);
  height: 100%;
}

.col-a4 {
  padding: 48px;
  background: rgb(255, 255, 255);
  height: 100%;
  overflow: auto;
}

.butt-1 {
  margin-top: 48px;
}

.butt-1 .but-ac1 {
  width: 120px;
  height: 48px;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 400;
  line-height: 48px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.stretched-link {
  color: var(--color-43);
}

.stretched-link:hover {
  color: #fff;
}

.but1 {
  border-radius: 4px;
  border-width: 0 !important;
  box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1),
    0px 3.2px 7.2px rgba(0, 0, 0, 0.13);
  color: #222222;
}

.but1 a {
  color: #222222;
}

.but1:hover a {
  color: #fff;
}

.html {
  min-height: 50vh;
  background: #ffffff;
  border-radius: 10px;
  padding: 55px;
}

.btn-lg {
  font-size: 13px;
  height: 48px;
}

.but-ac {
  width: 140px;
  height: 40px;
  border-radius: 20px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 40px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.div-bor-1 {
  border-color: var(--color-cheng);
}

.div-bor-4 {
  border-color: #c4c6d2;
}

.but-1 {
  background: var(--color-cheng);
}

.but-4 {
  background: #c4c6d2;
}

.bt-1 {
  background: #d9d9d9;
  color: #8c8c8c;
}

.bt-2 {
  background: #4ca4ff;
  color: #ffffff;
}

.bt-3 {
  background: var(--color-cheng);
  color: #ffffff;
}

.bt-4 {
  background: var(--color-cheng);
  color: #ffffff;
}

.times {
  text-align: right;
  font-size: 12px;
  display: inline-block;
  color: #ffffff;
  background: #1f1f1f;
  border-radius: 58px;
  height: 28px;
  line-height: 28px;
}

.atime {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 36px;
  height: 36px;
}

.atime .icon {
  font-size: 28px;
  vertical-align: middle;
  margin-right: 16px;
  transform: translateY(-1px);
}

.atime .img {
  width: 20px;
  height: 20px;
  margin: 6px;
  vertical-align: middle;
  margin-right: 20px;
  transform: translateY(-1px);
}

.ts {
  background-color: var(--color-43);
  color: #ffffff;
  width: 156px;
  height: 48px;
  display: inline-block;
  border-radius: 2px;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  margin-left: 48px;
}

.ts1 {
  background-color: #ffffff;
  border: 1px solid var(--color-43);
  color: var(--color-43);
  width: 140px;
  height: 48px;
  display: inline-block;
  border-radius: 2px;
  font-size: 18px;
  line-height: 48px;
  text-align: center;
  margin-left: 48px;
  cursor: pointer;
}

.btn-type {
  width: 84px;
  height: 28px;
  display: inline-block;
  text-align: justify;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  border-radius: 58px;
  line-height: 28px;
  margin-right: -1px;
}

.info {
  background-color: #434343;
}

.primary {
  background: linear-gradient(106.57deg, #00cc2d 0%, #07ca9b 100%);
  border-radius: 58px;
  box-shadow: 0px 4px 10px rgba(249, 57, 0, 0.2);
}

.danger {
  background: #8c8c8c;
}

.success {
  background: var(--color-cheng);
  box-shadow: 0px 4px 10px rgba(249, 57, 0, 0.2);
}

.pdfa a {
  color: var(--el-text-color-regular);
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.pdfa:hover a {
  color: #fff;
}

.dialog-invitation {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 12px;
}
</style>
